// import { use, Suspense } from "react";
// import { ErrorBoundary } from "react-error-boundary";


// const Mess = ({ messagePromise }) => {
//   // const content = use(messagePromise)
//   let content = ''
//   messagePromise.then(res => {
//     console.log('messagePromise---->', res)
//   })
//   .catch(err => {
//     console.log('messagePromiseError---->', err)
//     content = err
//     if (err) {
//       return <p>Here is the message: {err}</p>;
//     }
//   })
// }
// export default function MessageContainer({ messagePromise }) {
//   return (
//     <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
//       <Suspense fallback={<p>⌛Downloading message...</p>}>
//         <Mess messagePromise={messagePromise} />
//       </Suspense>
//     </ErrorBoundary>
//   );
// }


import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

import Message from '../Message';



export default function MessageContainer({ messagePromise }) {
  return (
    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
      <Suspense fallback={<p>⚛️Loading message...</p>}>
        <Message messagePromise={messagePromise} />
      </Suspense>
    </ErrorBoundary>
  );
}